<!--引入公共的模板-->
{{extend './layout.html'}}
{{block 'content'}}
<div class="container">
  <div class="m-5 p-5 bg-light">
    <div class="text-center border-bottom">
      <h2>{{ article.title }}</h2>
      <p>作者：{{ article.author }}</p>
      <p>{{ article.subhead }}</p>
      <p> 
        <button type="button" class="btn btn-primary">阅读 {{ article.hits }} </button>
        <button type="button" class="btn btn-success" id="downs">点赞 {{ article.downs }} </button>
      </p>
    </div>
    <div class="border-bottom" style="min-height: 300px">
      {{@ article.content }}
    </div>
    <div class="text-center pt-5">
      <p>如果您觉得这篇文章不错的话，请作者喝杯咖啡...</p>
      <button type="button" class="btn btn-danger" id="admire" style="position:relative;">
        赞赏
        <img src="img/wx.jpg" alt="wx" width="200px" style="position:absolute;top:-320px;left:-50px;display: none;">
      </button>
      <p class="mt-3">166人赞赏</p>
      <div class="">
        <img src="img/user.png" alt="1"><img src="img/user.png" alt="1"><img src="img/user.png" alt="1"><img src="img/user.png" alt="1"><img src="img/user.png" alt="1"><img src="img/user.png" alt="1">
      </div>
    </div>
  </div>
</div>

<script>

  // 页面js中获取art-template 传递给页面的数据

  $(function(){

    // 点赞
    const id = "{{article.article_id}}";
    const nickname = "{{nickname}}" || null;    
    let downs = Number("{{article.downs}}");
    let isDowns = true;
    let onOff = Number("{{onOff}}");

    $("#downs").click(function(){
      if (onOff === 1) {
        alert("您已点赞过!");
        return;
      }

      if (nickname === null) {
        alert('点赞请先登录')
        return;
      }

      if (isDowns) {
        downs++;
        $(this).html(`取消点赞 ${downs}`);
        isDowns = false;
        // 发送请求
        $.ajax({
          url:"/downs",
          type:"post",
          data:{id,downs,isDowns,nickname},
          success:function(data){
            console.log(data);
          }
        })
      }else{
        downs--;
        $(this).html(`点赞 ${downs}`);
        isDowns = true;
        // 发送请求
        $.ajax({
          url:"/downs",
          type:"post",
          data:{id,downs,isDowns,nickname},
          success:function(data){
            console.log(data);
          }
        })
      }
      

    })

    // 赞赏
    $("#admire").click(function(){
      $(this).find('img').toggle();
    })


  })
</script>

{{/block}}